import React, {
  useRef,
  useState,
  useImperativeHandle,
  forwardRef,
} from "react";

export default forwardRef((props, ref) => {
  const childMethodRef = useRef(null);
  const [isShow, setIsShow] = useState(false);

  useImperativeHandle(ref, () => ({
    // 将内部方法绑定到 ref 对象上
    childMethod: () => {
      if (childMethodRef.current) {
        childMethodRef.current();
      }
    },
  }));

  //显示隐藏
  const toggleShowHide = () => {
    setIsShow(!isShow);
  };

  // 将内部方法绑定到引用上
  childMethodRef.current = toggleShowHide;

  return (
    <>
      {isShow && (
        <div>
          {/* 遮罩层 */}
          <div className="mask"></div>
          <div className="con">
            {props.children}
            <div className="logo">{props.logoImg}</div>
            <h2>{props.logoName}</h2>
            <div className="main">弹框内容</div>
            <div className="btns">
              <button>确定</button>
              <button>取消</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
});
